import React, {Component} from "react";
import Slider from "react-slick";
import styles from './style.css';
import index from './index.scss';
import CSSModules from "react-css-modules/dist/index";

@CSSModules(index)
export default class SimpleSlider extends Component {
    constructor(props) {
        super(props);
        const { posts } = this.props;
        this.coverImage = posts.coverImage
        this.content_summary = posts.content_summary
        this.images = posts.images
        this.state = {show: 0};
        this.imagesShow = this.imagesShow.bind(this);
        this.imagesHide = this.imagesHide.bind(this);
    }

    imagesShow(e) {
        e.stopPropagation();
        this.setState({show: 1});
    }

    imagesHide(e) {
        e.stopPropagation();
        this.setState({show: 0});
    }

render()
    {
        const images = this.images
        const coverImage = this.coverImage
        const content_summary = this.content_summary
        const show = this.state.show
        const settings = {
            dots: true,
            infinite: true,
            speed: 500,
            slidesToShow: 1,
            slidesToScroll: 1
        };

        var arr = content_summary.split(",");
        // if (!this.props.isMember) return '';
        return (
            <div>
                <img src={arr[0]} alt="" style={{width: '100%'}} onClick={this.imagesShow}/>
                {/*<h2> Single Item</h2>*/}
                {show ?
                <div styleName="SliderBox" onClick={this.imagesHide}>
                    <Slider {...settings} styleName="SliderNav">
                        {arr.map((item, index) => {
                            return <div style={{width: '100%'}} key={index}>
                                {/*{item}*/}
                                <img src={item} alt="" styleName="SliderNav" />
                            </div>
                        })}
                    </Slider>
                </div> : null }
            </div>
        );
    }
}
